/*
 * @Author: luoqi
 * @Date: 2022-04-01 15:36:31
 * @LastEditors: luoqi
 * @LastEditTime: 2022-05-09 14:22:31
 * @Description: 
 */
import React, { useState } from 'react';
import { Button, Modal, Form, Input, Radio, Select, Upload, message } from 'antd';
import { PlusOutlined, UploadOutlined, CheckOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'
import axios from '../../utils/axios'
import qs from 'qs'
const { Option } = Select;



const Addvideo = (props) => {
  const { departmentTree, partTree } = props.types;
  const [isModalVisible, setIsModalVisible] = useState(false);
  //上传文件
  const [imgUrl, setImgUrl] = useState()
  let [form] = Form.useForm()
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form.submit()
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onFinish = (values) => {
    console.log('Success:', values);
    let { name, depType, posType,status } = values;
    let tag = partTree.find(item => item.id == posType).name + ',' + departmentTree.find(item => item.id == depType).name
    // 获取用户id
    let id = JSON.parse(sessionStorage.getItem('userinfo')).id;
    console.log(id);
    axios({
      url: '/video/upsert',
      method: 'post',
      data: qs.stringify({
        departmentPid: depType,
        partPid: posType,
        tag: tag,
        title: name,
        adminId: id,
        url: imgUrl,
        status: values.status == 1 ? true : false,
      })
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        props.setNum(1);
        //提示
        message.success('添加成功');
        setIsModalVisible(false);

      }
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  function handleChange(value) {
    console.log(`selected ${value}`);
  }
  //上传文件
  const props1 = {
    name: 'file',
    action: '/api/upload',
    headers:{
      token:sessionStorage.getItem('token')
    },
    onChange(info) {
      console.log(info);
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        // console.log(info.file.response);
        let { fileName } = info.file.response
        setImgUrl(fileName)
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };
  return (
    <div>
      <Button type="success" icon={<PlusOutlined />} onClick={showModal}>
        添加
      </Button>
      <Modal title="添加视频" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定"
        cancelText="取消">
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{ posType: partTree[0].id, depType: departmentTree[0].id ,status:1}}
        >
          <Form.Item
            label="视频名称"
            name="name"
            rules={[{ required: true, message: '请输入视频名称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="部位一级分类"
            name="posType"
            style={{ zIndex: 10, position: 'relative' }}
          >
            <Select style={{ width: 120 }} onChange={handleChange}>
              {partTree.map(item => {
                return <Option key={item.id} value={item.id}>{item.name}</Option>
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="科室一级分类"
            name="depType"
          >
            <Select style={{ width: 120 }} onChange={handleChange}>
              {departmentTree.map(item => {
                return <Option key={item.id} value={item.id}>{item.name}</Option>
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="上传视频"
            name="video"
          >
            <Upload {...props1}>
              <Button icon={<UploadOutlined />}>上传视频</Button>
            </Upload>
          </Form.Item>
          <Form.Item
          label="状态"
          name="status"
        >
          <Radio.Group  >
            <Radio value={1}>可用</Radio>
            <Radio value={0}>不可用</Radio>
          </Radio.Group>
        </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default connect(
  state => ({ types: state.types }),
  {}
)(Addvideo);
